<template>
    <li class="file">
        <p
            @click="isOpen=!isOpen"
            :class="{active:isFloder}"
        >{{data.name}} <span v-if="isFloder">{{isOpen?'[ - ]':'[ + ]'}}</span></p>
        <ul v-show="isOpen">
            <Tree 
            v-for="(item,i) in data.children"
            :key="i"
            :data="item"
        ></Tree>
        </ul>
    </li>
</template>

<script>
export default {
    props:{
        data:Object
    },
    data() {
        return {
            isOpen:false
        }
    },
    computed:{
        isFloder(){
            return this.data.children && this.data.children.length
        }
    },
    methods:{

    }
}
</script>
<style lang="scss" scoped>
    .file{
        user-select: none;
    }
    .active{
        color: crimson;
        font-weight: 800
    }
</style>